import { defineComponent } from 'vue'
import { RightOutlined, DollarOutlined } from '@ant-design/icons-vue'
import homeIcons from '../../assets'
import '../../styles/actor-works.less'

export default defineComponent({
  setup() {
    return () => (
      <div class="pr-4 my-4 actor-introduct-works w-full">
        <div class="flex justify-between pl-4">
          <span class="font-medium text-sm text-black">电视剧作品</span>
          <div class="more">
            <span>更多</span>
            <right-outlined class="ml-[6px]" />
          </div>
        </div>
        <div class="video-grid">
          {[1, 2].map((item, index) => {
            return (
              <div class="video">
                <div class={index == 0 ? 'video_shadow video_shadow_one' : 'video_shadow'}>
                  <img src={homeIcons.film} alt="" class="img-show" />
                  <p class="text-xs text-white text-right absolute top-[161px] right-3  dome-text">集数</p>
                </div>
                <p class="text-sm text-black text-left font-medium mt-2">影片名称</p>
                <div v-show={index % 2 === 0} class="free">
                  免费
                </div>
                {index % 2 === 0 ? (
                  <div class="free">免费</div>
                ) : (
                  <div class="gold">
                    <DollarOutlined class="gold-icon" />
                    <span>100</span>
                  </div>
                )}
              </div>
            )
          })}
          <div class="w-[136px] h-[181px] bg-[#e9ebef] rounded-lg flex items-center justify-center">
            <span class="text-[#8f9299] text-sm">
              更多 <RightOutlined />
            </span>
          </div>
        </div>
      </div>
    )
  }
})
